<template>
  <Friends_page :FriendsArr="contactList" ye="contact" title="选择联系人" :offsetTopArr="offsetTopArr"
    @goback="goback" />
</template>

<script setup>
import { ref } from 'vue'
// 爱心
import Friends_page from '../components/common/friends-page.vue'
import { getContactAPI } from '../api/Contact-page';
// 我的id
const myId = JSON.parse(localStorage.getItem('data')).userId
// 好友列表全部数据
const FriendsArr = ref([])
const contactList = ref([])
const offsetTopArr = ref([])
init()
async function init() {
  // 获取好友列表
  let result = await getContactAPI(myId)
  let data = result.data.data
  data.forEach((item) => {
    let obj = { Comment: {} }
    obj.Comment.userAvatar = item.userAvatar
    obj.Comment.userDesc = item.userDesc
    obj.Comment.userId = item.userId
    obj.Comment.userNickname = item.userNickname
    FriendsArr.value.push(obj)
  })
  // 名称排序1
  SegSort(FriendsArr.value)
  console.log(contactList.value, '排序好的')
  setTimeout(() => {
    const titlemove = document.querySelectorAll('.titlemove')
    console.log(titlemove);
    titlemove.forEach(item => {
      console.log(item.offsetTop);
      offsetTopArr.value.push(item.offsetTop - 44)
    })
    console.log(offsetTopArr.value);
  }, 1000)
}
// 名称排序2
function SegSort(arr) {
  //非空判断如果传递过来的是一个空数组，会返回一个空数组

  // if (!String.prototype.localeCompare) return null

  let title = 'ABCDEFGHJKLMNOPQRSTWXYZ'.split('') //定义好的排序方案

  let zh = '阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀'.split('')

  let newAll = [] //用于保存排序后的数组

  title.map((item, i) => {
    let cur = { title: item, data: [] }
    // 根据字段寻找排序方案对应的字符
    arr.map((item) => {
      if (item.Comment.userNickname.localeCompare(zh[i]) >= 0 && item.Comment.userNickname.localeCompare(zh[i + 1]) < 0) {
        cur.data.push(item)
      }
    })
    // 进行排序
    if (cur.data.length != 0) {
      cur.data.sort(function (a, b) {
        return a.Comment.userNickname.localeCompare(b.userName, 'zh')
      })
      newAll.push(cur)
    }
  })
  // console.log("首字母排序后的", newAll);
  //  赋值给渲染的数组
  contactList.value = newAll
}
async function goback() {
  window.history.go(-1)
}
</script>

<style lang="scss" scoped></style>